<template>
    <el-card>
      <el-table border stripe :data="skuList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{ row, $index }">
            <el-image
              :src="row.skuDefaultImg"
              style="width: 100px; height: 80px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template v-slot="{ row, $index }">
            <el-button
              v-if="row.isSale === 0"
              type="success"
              size="small"
              icon="ele-Top"
              title="上架"
              @click="Added(row)"
            ></el-button>
            <el-button
              v-else
              type="info"
              size="small"
              icon="ele-Bottom"
              title="下架"
              @click="UnShelve(row)"
            >
            </el-button>
            <el-button
              type="warning"
              size="small"
              icon="ele-Edit"
              title="修改sku"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="ele-InfoFilled"
              title="查看sku详情"
              @click="SkuDetails(row)"
            >
            </el-button>
            <el-button
              type="danger"
              size="small"
              icon="ele-Delete"
              title="删除sku"
              @click="deleteSku(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
      <el-pagination
        v-model:currentPage="page"
        v-model:page-size="limit"
        :total="total"
        :pager-count="7"
        layout="prev, pager, next, jumper"
      />
      <el-drawer v-model="drawer" size="50%" :with-header="false">
        <el-row>
            <el-col :span="6"><h3>名称</h3></el-col>
            <el-col :span="18"><p>111111</p></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><h3>名称</h3></el-col>
            <el-col :span="18"><p>111111</p></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><h3>名称</h3></el-col>
            <el-col :span="18"><p>111111</p></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><h3>名称</h3></el-col>
            <el-col :span="18"><p>111111</p></el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "Sku",
  });
  </script>
  
  <script setup lang="ts">
  import { requestcancelSale, requestDeleteSku, requestFindById, requestOnSale, requestSkuList, type SkuInfoItemType, type SkuInfoListType } from "@/api/sku";
 import { ElMessage } from "element-plus";
  import { onMounted, ref,watch } from "vue";
  const page = ref(1);
  const limit = ref(10);
  const total = ref(0);
  //获取初始化动态数据
  const skuList = ref<SkuInfoListType>([]);

// 封装请求函数
const getSkuPagingList = async()=>{
    const re =await requestSkuList(page.value,limit.value)
    console.log(re,'11');
    skuList.value = re.records
    total.value = re.total
}

onMounted(()=>{
    getSkuPagingList()
})

//监听页码变化请求
watch([page,limit],()=>{
    getSkuPagingList()
})

//上架商品
const Added = async(row:SkuInfoItemType)=>{
    try{
       await requestOnSale(row.id as number)
       getSkuPagingList()
       ElMessage.success('上架成功')
    }catch(e){
        ElMessage.error('上架失败')
    }
}
//下架商品
const UnShelve =async(row:SkuInfoItemType)=>{
    try{
        await requestcancelSale(row.id as number)
        getSkuPagingList()
       ElMessage.success('下架成功')
    }catch(e){
        ElMessage.error('下架失败')
    }
}

//删除sku
const deleteSku = async(row:SkuInfoItemType)=>{
    try{
        await requestDeleteSku(row.id as number)
        getSkuPagingList()
       ElMessage.success('删除成功')
    }catch(e){
        ElMessage.error('删除失败')
    }
}

//sku详情弹窗
const drawer =ref(false)
// const SkuDetail = ref<SkuInfoItemType>()
const SkuDetails = async(row:SkuInfoItemType)=>{
  drawer.value = true
 try{
   const re = await requestFindById(row.id as number)
    console.log(re,'11312312')
 }catch(e){
    ElMessage.error('获取失败')
 }

}
  </script>
  
  <style lang="less" scoped>
    .el-row {
    height: 40px;
    }
    .el-col {
    font-weight: bold;
    line-height: 40px;
    }
  </style>